import Vue from 'vue'

import Vuex from 'vuex'
Vue.use(Vuex)

// 每当初始化项目时，就先从localStorage中取数据
let cartInLocalStorage = window.JSON.parse(localStorage.getItem('cart') || '[]')

// 创建store状态管理对象
const store = new Vuex.Store({
  state: {
    // 在 cart 中，应该把每个商品，存储为一个对象  { id, count, selected }
    cart: cartInLocalStorage        // 购物车数组
  },
  mutations: {
    addToCartInStore(state, goods) {
      // 先检测cart数组中是否已存在该商品
      let flag = false        // 设置flag检测是否购物车中已有该商品
      // 如果购物车中，之前曾经有这条商品，则只更新数量即可；如果曾经没有，则 直接push
      state.cart.some(item => {
        if (item.id === goods.id) {
          item.count += goods.count
          flag = true
          return true
        }
      })

      if (!flag) {
        state.cart.push(goods)
      }

      // 为了持久化存储购物车的数据，可以把 购物车的商品，序列化出来，存储到 localStorage 中
      localStorage.setItem('cart', window.JSON.stringify(state.cart))
    },
    updateCart(state, goods) {
      state.cart.some(item => {
        if (item.id === goods.id) {
          item.count = goods.count
          return true
        }
      })

      // 为了持久化存储购物车的数据，可以把 购物车的商品，序列化出来，存储到 localStorage 中
      localStorage.setItem('cart', window.JSON.stringify(state.cart))
    },
    delFromCart(state, id) {
      state.cart.some((item, i) => {
        if (item.id === id) {
          state.cart.splice(i, 1)
          return true
        }
      })

      // 为了持久化存储购物车的数据，可以把 购物车的商品，序列化出来，存储到 localStorage 中
      localStorage.setItem('cart', window.JSON.stringify(state.cart))
    },
    changeSelectState(state, id) {
      state.cart.some(item => {
        if (item.id === id) {
          item.selected = !item.selected
          return true
        }
      })

      // 为了持久化存储购物车的数据，可以把 购物车的商品，序列化出来，存储到 localStorage 中
      localStorage.setItem('cart', window.JSON.stringify(state.cart))
    }
  },
  getters: {
    totalCount(state) {
      // 徽标中商品数量
      let total = 0
      state.cart.forEach(item => total += item.count);
      return total
    },
    idStr(state) {
      // 根据cart商品信息拼接id字符串，用于发起api数据请求
      let ids = []
      state.cart.forEach(item => ids.push(item.id))
      return ids.join(',')
    },
    countObj(state) {
      // 获取 购物车中 商品的Id和商品数量的键值对对应关系
      let o = {}
      state.cart.forEach(item => o[item.id] = item.count)
      return o
      // {
      //   88: 3,
      //   89: 5
      // }
    },
    selectedObj(state) {
      // 获取 购物车中 商品的Id和商品显示状态的键值对对应关系
      let o = {}
      state.cart.forEach(item => o[item.id] = item.selected)
      return o
      // {
      //   88: true,
      //   89: true
      // }
    },
    selectedCount(state) {
      // 返回被勾选的商品总数
      let sc = 0
      state.cart.forEach(item => {
        // 只有这一项商品被选中了，才把数量加起来
        if (item.selected) {
          sc += item.count
        }
      })
      return sc
    },
    selectedAmount(state) {
      let sa = 0
      state.cart.forEach(item => {
        if (item.selected) {
          sa += item.count * item.price
        }
      })
      return sa
    }
  }
})

export default store;